<template>
    <div class="header-layout">
        <img class="main-title" src="@/assets/title/main-title.png" />
        <img class="sub-title" src="@/assets/title/sub-title.png" />
        <img class="title-bg" src="@/assets/bg/titleBg.png" />
    </div>
</template>
<script setup lang="ts">
type IProps = {};
const props = withDefaults(defineProps<IProps>(), {});
const emit = defineEmits(["change"]);
</script>
<style lang="scss" scoped>
.header-layout {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;

    >img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .main-title {
        top: 38px;
        width: 567px;
    }

    .title-bg {
        width: 841px;
        top: 88px;
    }

    .sub-title {
        width: 394px;
        top: 82px;
    }
}
</style>
